<template>
    <el-dialog class="scada-share-dialog" :title="$t('scada.common.scadaShareDialog.842076-0')" :visible.sync="visible" width="680px" append-to-body @open="dialogOpen" :before-close="dialogBeforeClose">
        <div class="device-list" v-show="isOpenShare">
            <p>{{ $t('scada.common.scadaShareDialog.842076-1') }}</p>
            <el-form class="query-from" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
                <el-form-item prop="deviceName">
                    <el-input v-model="queryParams.deviceName" :placeholder="$t('scada.common.scadaShareDialog.842076-3')" clearable size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('scada.common.scadaShareDialog.842076-4') }}</el-button>
                    <el-button icon="el-icon-refresh" size="small" @click="handleResetQuery">{{ $t('scada.common.scadaShareDialog.842076-5') }}</el-button>
                </el-form-item>
            </el-form>
            <div class="tools-wrap">
                <el-checkbox v-model="queryParams.showChild" @change="handleQuery">{{ $t('scada.common.scadaShareDialog.842076-6') }}</el-checkbox>
                <el-tooltip :content="$t('scada.common.scadaShareDialog.842076-7')" placement="top"><i class="el-icon-question question-icon"></i></el-tooltip>
            </div>
            <el-table ref="table" v-loading="loading" :data="deviceList" :border="false" size="small">
                <el-table-column :label="$t('scada.common.scadaShareDialog.842076-2')" align="left" prop="deviceName" />
                <el-table-column :label="$t('scada.common.scadaShareDialog.842076-8')" align="center" prop="opation" width="100">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleShare(scope.row)">{{ $t('scada.common.scadaShareDialog.842076-0') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" layout="prev, pager, next" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDeviceList(null)" />
        </div>

        <div class="open-share" v-show="!isOpenShare && !isShare">
            <div class="open-img">
                <img src="@/assets/topo-img/images/scada_share.png" />
            </div>
            <el-button class="open-btn" type="primary" size="small" @click="handleOpenShare">{{ $t('scada.common.scadaShareDialog.842076-10') }}</el-button>
        </div>

        <div class="share-content" v-show="!isOpenShare && isShare">
            <div class="share">
                <span>{{ $t('scada.common.scadaShareDialog.842076-15') }}</span>
                <span class="close-share" @click="handeleCloseshare">
                    <i class="el-icon-link"></i>
                    {{ $t('scada.common.scadaShareDialog.842076-16') }}
                </span>
            </div>
            <div class="share">
                <el-input v-model="link" size="small" :disabled="true"></el-input>
                <el-button v-if="!isCheckedPass" type="primary" size="small" style="width: 163px" @click="handleCopyUrl">{{ $t('scada.common.scadaShareDialog.842076-17') }}</el-button>
                <el-button v-else type="primary" size="small" style="width: 163px" @click="handleCopyUrlAndPass">{{ $t('scada.common.scadaShareDialog.842076-18') }}</el-button>
            </div>
            <el-checkbox style="margin-bottom: 3px" v-model="isCheckedPass" @change="handleNeedPassCheckChange">{{ $t('scada.common.scadaShareDialog.842076-19') }}</el-checkbox>
            <div class="share" v-show="isCheckedPass">
                <el-input v-model="shareDatas.sharePass" size="small" :disabled="true"></el-input>
                <el-button type="primary" size="small" style="width: 163px" @click="handleResetPass">{{ $t('scada.common.scadaShareDialog.842076-20') }}</el-button>
            </div>

            <div class="images-link">
                <p>{{ $t('scada.common.scadaShareDialog.842076-21') }}</p>
                <div class="link">
                    <div class="qrcode">
                        <vue-qr ref="vueQrRef" :text="shareDatas.shareShortUrl" :size="120" :margin="0"></vue-qr>
                    </div>
                    <div>
                        <p>
                            {{ $t('scada.common.scadaShareDialog.842076-22') }}
                            <br />
                            {{ $t('scada.common.scadaShareDialog.842076-23') }}
                        </p>
                        <el-button style="margin: 10px" size="small" icon="el-icon-download" @click="handleDownLoadQrCode">{{ $t('scada.common.scadaShareDialog.842076-24') }}</el-button>
                    </div>
                </div>
            </div>
            <el-button v-if="type === 1" style="margin-bottom: 10px" type="text" icon="el-icon-back" @click="handeleBackDeviceList">{{ $t('scada.common.scadaShareDialog.842076-25') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import vueQr from 'vue-qr';
import { listDeviceShort } from '@/api/iot/device';
import { getShare, editShare } from '@/api/scada/center';

export default {
    name: 'scadaShareDialog',
    components: {
        vueQr,
    },
    props: {
        visible: {
            type: Boolean,
            required: true,
            default: false,
        },
        guid: {
            type: String,
            required: true,
            default: '',
        },
        type: {
            type: Number,
            required: true,
            default: 1,
        },
        productId: {
            type: Number,
            default: null,
        },
    },
    computed: {},
    data() {
        return {
            loading: true, // 遮罩层
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceName: null,
                productId: null,
                showChild: false,
            },
            deviceList: [], // 设备表格数据
            total: 0, // 总条数
            isOpenShare: false, // 打开分享
            isShare: false, // 是否分享内容
            shareDatas: {
                isShare: null,
                shareShortUrl: '',
                sharePass: '',
            },
            isCheckedPass: false, // 是否需要密码
            link: '',
        };
    },
    methods: {
        // 获取设备列表
        getDeviceList() {
            this.loading = true;
            listDeviceShort(this.queryParams).then((res) => {
                if (res.code === 200) {
                    this.deviceList = res.rows;
                    this.total = res.total;
                }
                this.loading = false;
            });
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getDeviceList();
        },
        // 重置按钮操作
        handleResetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 组态设备分享
        handleShare(row) {
            // 查询社保是否被分享
            const params = {
                guid: this.guid,
                type: this.type,
                serialNumber: row.serialNumber,
            };
            getShare(params).then((res) => {
                const { code, data } = res;
                if (code === 200) {
                    this.shareDatas = data;
                    this.isCheckedPass = data.sharePass ? true : false;
                    this.link = data.sharePass ? data.shareShortUrl + '#(' + this.$t('scada.common.scadaShareDialog.842076-30') + ':' + data.sharePass + ')' : data.shareShortUrl;
                    if (data.isShare === 1) {
                        this.isShare = true;
                        this.isOpenShare = false;
                    } else {
                        this.isShare = false;
                        this.isOpenShare = false;
                    }
                }
            });
        },
        // 打开分享
        handleOpenShare() {
            this.$alert(this.$t('scada.common.scadaShareDialog.842076-12'), this.$t('scada.common.scadaShareDialog.842076-11'), {
                showCancelButton: true,
                cancelButtonText: this.$t('scada.common.scadaShareDialog.842076-13'),
                confirmButtonText: this.$t('scada.common.scadaShareDialog.842076-14'),
                callback: (action) => {
                    if (action === 'confirm') {
                        // 更新分享状态
                        const params = {
                            ...this.shareDatas,
                            isShare: 1,
                        };
                        editShare(params).then((res) => {
                            const { code, data } = res;
                            if (code === 200) {
                                this.shareDatas = data;
                                this.isShare = true;
                                this.isCheckedPass = data.sharePass ? true : false;
                                this.link = data.sharePass ? data.shareShortUrl + '#(' + this.$t('scada.common.scadaShareDialog.842076-30') + ':' + data.sharePass + ')' : data.shareShortUrl;
                                this.$message({
                                    type: 'success',
                                    message: this.$t('scada.common.scadaShareDialog.842076-26'),
                                });
                            }
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: this.$t('scada.common.scadaShareDialog.842076-27'),
                        });
                    }
                },
            });
        },
        // 关闭分享
        handeleCloseshare() {
            this.$alert(this.$t('scada.common.scadaShareDialog.842076-12'), this.$t('scada.common.scadaShareDialog.842076-11'), {
                showCancelButton: true,
                cancelButtonText: this.$t('scada.common.scadaShareDialog.842076-13'),
                confirmButtonText: this.$t('scada.common.scadaShareDialog.842076-14'),
                callback: (action) => {
                    if (action === 'confirm') {
                        // 更新分享状态
                        const params = {
                            ...this.shareDatas,
                            isShare: 0,
                        };
                        editShare(params).then((res) => {
                            const { code } = res;
                            if (code === 200) {
                                this.isShare = false;
                                this.$message({
                                    type: 'success',
                                    message: this.$t('scada.common.scadaShareDialog.842076-28'),
                                });
                            }
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: this.$t('scada.common.scadaShareDialog.842076-27'),
                        });
                    }
                },
            });
        },
        // 复制链接
        handleCopyUrl() {
            const { shareShortUrl } = this.shareDatas;
            navigator.clipboard.writeText(shareShortUrl).then(() => {
                this.$message.success(this.$t('scada.common.scadaShareDialog.842076-29'));
            });
        },
        // 复制链接和密码
        handleCopyUrlAndPass() {
            const { shareShortUrl, sharePass } = this.shareDatas;
            const tetx = shareShortUrl + '#(' + this.$t('scada.common.scadaShareDialog.842076-30') + ':' + sharePass + ')';
            navigator.clipboard.writeText(tetx).then(() => {
                this.$message.success(this.$t('scada.common.scadaShareDialog.842076-29'));
            });
        },
        // 是否需要密码
        handleNeedPassCheckChange(value) {
            // 更新密码
            const params = {
                ...this.shareDatas,
                sharePassStatus: value ? 1 : 0,
            };
            editShare(params).then((res) => {
                const { code, data } = res;
                if (code === 200) {
                    this.shareDatas = data;
                    this.link = data.sharePass ? data.shareShortUrl + '#(' + this.$t('scada.common.scadaShareDialog.842076-30') + ':' + data.sharePass + ')' : data.shareShortUrl;
                }
            });
        },
        // 重置密码
        handleResetPass() {
            // 更新密码
            const params = {
                ...this.shareDatas,
                sharePassStatus: 1,
            };
            editShare(params).then((res) => {
                const { code, data } = res;
                if (code === 200) {
                    this.shareDatas = data;
                }
            });
        },
        // 下载二维码
        handleDownLoadQrCode() {
            const qrInstance = this.$refs.vueQrRef;
            const image = qrInstance.$el;
            const url = image.currentSrc;
            const link = document.createElement('a');
            link.href = url;
            link.download = 'share_code.png';
            link.click();
            URL.revokeObjectURL(link.href); // 释放URL对象
        },
        // 返回设备列表
        handeleBackDeviceList() {
            this.isShare = false;
            this.isOpenShare = true;
        },
        // dialog 打开
        dialogOpen() {
            if (this.type === 1) {
                this.queryParams.productId = this.productId;
                this.$nextTick(() => {
                    this.getDeviceList();
                });
                this.isOpenShare = true;
            } else {
                const params = {
                    guid: this.guid,
                    type: this.type,
                };
                getShare(params).then((res) => {
                    const { code, data } = res;
                    if (code === 200) {
                        this.shareDatas = data;
                        this.isCheckedPass = data.sharePass ? true : false;
                        this.link = data.sharePass ? data.shareShortUrl + '#(' + this.$t('scada.common.scadaShareDialog.842076-30') + ':' + data.sharePass + ')' : data.shareShortUrl;
                        this.$nextTick(() => {
                            if (data.isShare === 1) {
                                this.isShare = true;
                                this.isOpenShare = false;
                            } else {
                                this.isShare = false;
                                this.isOpenShare = false;
                            }
                        });
                    }
                });
            }
        },
        // dialog 关闭
        dialogBeforeClose() {
            this.$emit('update:visible', false);
        },
    },
};
</script>

<style lang="scss" scoped>
.scada-share-dialog {
    .device-list {
        width: 100%;

        p {
            padding: 0;
            margin: 0;
        }

        .query-from {
            margin-top: 10px;

            ::v-deep .el-form-item {
                margin-bottom: 10px;
            }
        }

        .tools-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 12px;

            .question-icon {
                margin-left: 5px;
            }
        }
    }

    .open-share {
        width: 100%;
        text-align: center;

        .open-img {
            width: 100%;

            img {
                margin: 50px 0;
            }
        }

        .open-btn {
            width: 260px;
            margin-bottom: 60px;
        }
    }

    .share-content {
        .share {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;

            .close-share {
                display: flex;
                align-items: center;
                cursor: pointer;
            }

            .el-input {
                width: 72%;
            }
        }

        ::v-deep .el-checkbox__label {
            font-size: 12px;
        }

        .images-link {
            margin: 30px 0;

            .link {
                display: flex;
                align-items: center;
                margin: 20px 0;

                .qrcode {
                    margin-right: 20px;
                }
            }
        }
    }
}
</style>
